<template>
  <div class="my-input">
    <div class="input"
        :style="{ width: width + 'px' }"
    >
      <input
        :type="type"
        :value="modelValue"
        @input="onInput"
        v-bind="$attrs"
      />
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "my-input",
  props: {
    label: {
      type: String,
      required: false,
      default: () => "",
    },
    type: {
      type: String,
      required: false,
      default: () => "text",
    },
    modelValue: {
      type: String,
      required: true,
      default:()=>""
    },
    width: {
      type: String,
      required: false,
      default: () => "200",
    },
  },
  setup(props, { emit }) {
      
    const onInput = (event: any) => {
      emit("update:modelValue", event.target.value);
    };

    return {
      onInput,
    };
  },
});
</script>

<style lang='less' scoped>
.my-input {
  text-align: left;
  display: inline-block;
  flex-direction: row;

  .input {
    background: rgb(235, 235, 235);
    border-radius: 3px;
    margin-left: 15px;
    border: 1px solid rgb(30, 30, 30);
    padding: 2px;
    display: inline-block;
    input {
      border: none;
      outline: none;
      background-color: initial;
      width: 100%;
      font-size: 14px;
    }
  }
}
</style>